<template>
  <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px">
    <div >Item 1</div>
    <div >Item 2</div>
    <div >Item 3</div>
  </div>
<!--可视化前端编辑区  -->
  <div>可视化前端编辑区</div>
  <div v-for="(v,k) in current.style">
    <label>{{k}}</label>
    <input v-model="current.style[k]">
  </div>
  <div>预览区</div>
  <VueDraggable ref="el" v-model="list">
    <div v-for="item in list" >
      <component @click="selectDom(item)"  :style=item?.style :is="item.type" >{{item.value}}</component>
    </div>
  </VueDraggable>

</template>

<script setup lang="ts">
import { ref} from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
let current=ref({})
const list = ref([
  {
    type: 'div',
    value:'你好我是div',
    style:{color:'red',border:'1px solid #ff0000'},
    children: []
  },
  {
    type: 'input',
    value:'输入框',
    style:{color:'blue',border:'1px solid blue'},
    children: []
  },
  {
    type: 'button',
    value:'按钮3',
    style:{color:'green',border:'1px solid green'},
    children: []
  },
])
//点击元素，选择元素
function selectDom(dom) {
  console.log(dom)
  current.value=dom
}
</script>